import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import screen from '../../../../common/screen'
import { Title, Price, Description } from '../../../../widget/Text'
import RecommendPhoneItem from './RecommendPhoneItem'

type props = {
    infos: Array,//手机数据
    OnPressMore: Function,//点击更多
    OnPressItem: Function,//点击商品
}
class RecommendPhone extends PureComponent<>{
    render() {
        return (
            this.props.infos.length > 0 ?
                //}
                <View>
                    <TouchableOpacity onPress={() => this.props.OnPressMore('手机')}>
                        <Image source={require('../../../../img/home/recommend_phone.png')} style={styles.icon} />
                    </TouchableOpacity>
                    <View style={styles.contain}>
                        {
                            this.props.infos.map((item, i) => (
                                <RecommendPhoneItem
                                    key={i}
                                    info={item}
                                    OnPress={this.props.OnPressItem}
                                />
                            ))
                        }
                    </View>
                </View>
                : <View ></View>

        );
    }
}
const styles = StyleSheet.create({
    icon: {
        width: screen.width - 20,
        height: screen.width * 0.097,
        // marginTop: ,
        marginLeft: 8,
        marginRight: 10,
        backgroundColor: 'white',
        resizeMode: 'contain',
    },
    contain: {
        flexWrap: 'wrap',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginLeft:8,
        marginRight:8,
    },
})
export default RecommendPhone 